<!--  -->
<template>
  <div class="project">
    <div class="project-left">
      <!-- 搜索查询开始 -->
      <div class="project-search">
        <div class="search-box">
          <div class="search-top">
            <div class="huntSearch">
              <i class="el-icon-search hunt"></i>
              <span>筛选搜索</span>
            </div>
            <div class="search-btn">
              <el-button class="operation-btn rest" size="small">重置</el-button>
              <el-button type="primary" class="result">查询结果</el-button>
            </div>
          </div>
          <div class="factor">
            <form action class="form-box">
              <div class="factor-list">
                <label for="search">输入搜索：</label>
                <input type="text" placeholder="商品名称" id="search" class="inp" />
              </div>
              <div class="factor-list">
                <label for="proNum">商品货号：</label>
                <input type="text" placeholder="商品货号" id="proNum" class="inp" />
              </div>
              <div class="factor-list">
                <label for="proType">商品分类：</label>
                <input type="text" placeholder="请选择" id="proType" class="inp" />
              </div>
              <div class="factor-list">
                <label for="proBrand">商品品牌：</label>
                <input type="text" placeholder="品牌名称" id="proBrand" class="inp" />
              </div>
              <div class="factor-list">
                <label for="proStatus">上架状态：</label>
                <input type="text" placeholder="上架/下架" id="proStatus" class="inp" />
              </div>
              <div class="factor-list">
                <label for="proAudit">审核状态：</label>
                <input type="text" placeholder="已审核/未审核" id="proAudit" class="inp" />
              </div>
            </form>
          </div>
        </div>
      </div>
      <!-- 搜索查询结束 -->
      <!-- 添加开始 -->
      <Addcommom></Addcommom>
      <!-- 添加结束 -->
      <!-- 商品列表开始 -->
      <div class="product-list">
        <div class="product-list-title">
          <el-table
            :data="goodslist.slice((currentPage - 1) * pageSize, currentPage * pageSize)"
            style="width: 100%"
            @selection-change="handleSelectionChange"
            border
          >
            <el-table-column type="selection" width="60" align="center"></el-table-column>
            <el-table-column prop="aa" label="编号" width="80" align="center">
              <template slot-scope="scope">{{scope.row._id}}</template>
            </el-table-column>
            <el-table-column prop="name" label="商品图片" width="130" align="center">
              <el-image
                style="width: 100px; height: 100px"
                src="http://macro-oss.oss-cn-shenzhen.aliyuncs.com/mall/images/20180615/5acc5248N6a5f81cd.jpg"
              ></el-image>
            </el-table-column>
            <el-table-column prop="aa" label="商品名称" align="center">
              <template slot-scope="scope">{{scope.row.name}}</template>
              <!-- <template slot-scope="scope">{{scope.row.authority}}</template> -->
            </el-table-column>
            <el-table-column prop="price" label="价格/货号" align="center">
              <template slot-scope="scope">
                <span>价格：{{scope.row.price}}</span>
                <br />
                <span>货号：0</span>
              </template>
            </el-table-column>
            <el-table-column prop label="标签" width="140" align="center">
              <template slot-scope="scope">
                上架:
                <el-switch
                  v-model="scope.row.recommend"
                  active-color="#13ce66"
                  inactive-color="#ff4949"
                  class="proPut"
                ></el-switch>
                <br />新品:
                <el-switch
                  v-model="scope.row.newpro"
                  active-color="#13ce66"
                  inactive-color="#ff4949"
                  class="proNew"
                ></el-switch>
                <br />推荐:
                <el-switch
                  v-model="scope.row.showout"
                  active-color="#13ce66"
                  inactive-color="#ff4949"
                ></el-switch>
              </template>
            </el-table-column>
            <el-table-column prop label="排序" width="80" align="center">
              <template slot-scope="scope">{{scope.row.__v}}</template>
            </el-table-column>
            <el-table-column prop label="SUK库存" width="100" align="center">
              <el-button type="primary" icon="el-icon-edit" circle></el-button>
            </el-table-column>
            <el-table-column prop label="销量" width="80" align="center">
              <template slot-scope="scope">{{scope.row.numbers}}</template>
            </el-table-column>
            <el-table-column prop label="审核状态" width="100" align="center">
              <p>未审核</p>
              <p>
                <a href="javascript:;">审核详情</a>
              </p>
            </el-table-column>
            <el-table-column prop label="操作" width="160" align="center">
              <template slot-scope="scope">
                <div class="operation">
                  <el-button class="operation-btn" size="small">查看</el-button>
                  <el-button class="operation-btn" size="small">编辑</el-button>
                  <el-button class="operation-btn" size="small">日志</el-button>
                  <el-button
                    class="operation-btn"
                    size="small"
                    type="danger"
                    @click="open(scope.row._id)"
                  >删除</el-button>
                </div>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
      <!-- 商品列表结束 -->
      <!-- 搜索分页开始 -->
      <div class="product-bottom">
        <div class="product-botton-left">
          <el-row class="demo-autocomplete">
            <el-col :span="24">
              <el-autocomplete
                class="inline-input"
                v-model="state1"
                :fetch-suggestions="querySearch"
                placeholder="请输入内容"
              ></el-autocomplete>
            </el-col>
          </el-row>
          <el-button class="product-bottom-btn" type="success">确定</el-button>
        </div>
        <!-- 搜索分页开始 -->
        <template>
          <div class="product-botton-right">
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="currentPage"
              :page-sizes="[10,20,30,40]"
              layout="total, sizes, prev, pager, next, jumper"
              :total="goodslist.length"
            ></el-pagination>
          </div>
        </template>
      </div>
      <!-- 搜索分页结束 -->
    </div>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
import Addcommom from "./commom/Addcommom";
import axios from "axios";
export default {
  //import引入的组件需要注入到对象中才能使用
  components: {
    // navMenu,
    Addcommom,
  },
  data() {
    //这里存放数据
    return {
      goodslist: [],
      multipleSelection: [],
      restaurants: [],
      state1: "",
      state2: "",
      region2: "",

      currentPage: 1, // 当前页码
      total: 20, // 总条数
      pageSize: 10, // 每页的数据条数
      /* ------------- */
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    /* -------------------------------------分页器 ---------------------------------------------*/
    //每页条数改变时触发 选择一页显示多少行
    handleSizeChange(val) {
      this.currentPage = 1;
      this.pageSize = val;
    },
    //当前页改变时触发 跳转其他页
    handleCurrentChange(val) {
      this.currentPage = val;
    },
    //删除商品开始
    open(id) {
      this.$confirm("此操作将永久删除该商品, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$message({
            type: "success",
            message: "删除成功!",
            sure: axios
              .post("http://49.233.65.169:3000/api/deletegoods", {
                id: id,
              })
              .then((res) => {
                let remainTodos = this.goodslist.filter((v, i) => {
                  if (id != v._id) {
                    return true;
                  } else {
                    return false;
                  }
                });
                return (this.goodslist = remainTodos);
              }),
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    //删除商品结束
    //复选框事件
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    //底部搜索开始
    querySearch(queryString, cb) {
      var restaurants = this.restaurants;
      var results = queryString
        ? restaurants.filter(this.createFilter(queryString))
        : restaurants;
      // 调用 callback 返回建议列表的数据
      cb(results);
    },
    createFilter(queryString) {
      return (restaurant) => {
        return (
          restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) ===
          0
        );
      };
    },
    //底部搜索结束
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted: function () {
    // this.restaurants = this.loadAll();
    //初始化商品列表
    axios
      .post("http://49.233.65.169:3000/api/goodslist", {
        pageSize: 100,
        pageNum: 1,
      })
      .then((res) => {
        this.goodslist = res.data;
      });
  },
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang="less"  scoped>
.project {
  .project-left {
    width: 100%;
    padding: 20px;
    .project-search {
      width: 100%;
      padding: 20px;
      border: 1px solid #ebeef5;
      .search-box {
        width: 100%;
        height: 100%;
        .search-top {
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-bottom: 8px;
          .huntSearch {
            display: flex;
            align-items: baseline;
            .hunt {
              display: block;
              width: 16px;
              height: 16px;
            }
            span {
              font-size: 16px;
            }
          }
          .search-btn {
            .rest {
              width: 60px;
              height: 32px;
              margin-right: 16px;
              border: #94badf 1px solid;
              background-color: transparent;
              outline: none;
              border-radius: 3px;
              font-size: 12px;
              padding: 0;
            }

            .result {
              padding: 0;
              width: 80px;
              height: 32px;
              color: #fff;
              border: none;
              background-color: transparent;
              outline: none;
              background: #409eff;
              border-radius: 3px;
              font-size: 12px;
            }
          }
        }
        .factor {
          .form-box {
            display: flex;
            flex-wrap: wrap;
            .factor-list {
              width: 343px;
              height: 32px;
              margin: 0 10px 18px 0;
              display: flex;
              label {
                display: block;
                width: 140px;
                height: 100%;
                text-align: right;
                line-height: 32px;
                margin-right: 12px;
              }

              .inp {
                width: 230px;
                height: 100%;
                padding: 0 15px;
                border-radius: 4px;
                border: 1px solid #dcdfe6;
                outline: none;
              }
              .inp:focus {
                border: #b0d8ff 1px solid;
              }
              .inp::placeholder {
                color: #c9c9c9;
              }
            }
          }
        }
      }
    }
    .product-list {
      width: 100%;
      background: #409eff;
      margin-top: 20px;
      .product-list-title {
        .proPut {
          margin-bottom: 10px;
        }

        .proNew {
          margin-bottom: 10px;
        }

        .operation {
          .operation-btn {
            margin: 5px;
          }
        }
      }
    }
    .product-bottom {
      width: 100%;
      margin-top: 20px;
      display: flex;
      justify-content: space-between;
      .product-botton-left {
        display: flex;
        .product-bottom-btn {
          margin-left: 20px;
        }
      }

      // .product-botton-right {
      // }
    }
  }
}
</style>